<template>
  <div class="dashboard-container">
    <el-card>

      ====<p>{{ $t("message.name") }}</p>
      ====<p>{{ $t("message.el.datepicker.selectDate") }}</p>
      <i class="iconfont icon-eye" />======
      <i class="iconfont icon-bug" />======

      <svg-icon icon-class="eye" />

      <div style="display:flex;">
        <img class="avatar" :src="$store.getters.avatar.staffPhoto" alt="">
        <div>
          <h3>早安, {{ $store.getters.name }},祝你开心每一天</h3>
          <div><span>{{ $store.getters.name }} |
              {{ $store.getters.avatar.companyName }}-{{ $store.getters.avatar.departmentName }}</span></div>
        </div>
      </div>
      </svg-icon>
    </el-card>

    <div class="box">
      <div class="left">
        <el-card>
          <!-- 日历 -->
          <work-calendar />
        </el-card>
        <el-card>l2</el-card>
      </div>
      <div class="right">
        <el-card>r1</el-card>
        <el-card>
          <h2>绩效指数</h2>
          <div id="main" />
        </el-card>
        <el-card>r3</el-card>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  import * as echarts from 'echarts'
  import workCalendar from './components/work-calendar.vue'

  export default {
    name: 'Dashboard',
    components: {
      workCalendar
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data() {
      return {

        option: {
          title: {
            text: '基础雷达图'
          },
          legend: {
            data: []
          },
          radar: {
            // shape: 'circle',
            indicator: [{
                name: '工作效率',
                max: 6500
              },
              {
                name: '考勤',
                max: 16000
              },
              {
                name: '积极性',
                max: 30000
              },
              {
                name: '帮助同事',
                max: 38000
              },
              {
                name: '自主学习',
                max: 52000
              },
              {
                name: '正确率',
                max: 25000
              }
            ]
          },
          series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data: [{
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '预算分配（Allocated Budget）'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '实际开销（Actual Spending）'
              },
              {
                value: [15000, 1400, 2000, 2000, 42000, 2100],
                name: '123实际开销（Actual Spending）'
              }
            ]
          }]
        }
      }
    },
    mounted() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      this.option && myChart.setOption(this.option)
    }
  }

</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;

      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        margin-right: 10px;
      }

      .box {
        display: flex;
        margin-top: 20px;

        .el-card {
          margin-bottom: 20px;
        }

        .left {
          flex: 6;
          margin-right: 15px;
        }

        .right {
          flex: 4;

          #main {
            width: 100%;
            height: 300px;
          }
        }
      }
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }

  }

</style>
